<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdn.bootcss.com/vue/2.6.4/vue.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script>
    <script src="../build/china.js"></script>
</head>

<body style="background-color: #000">
    <div id="echarts" style="width: 1000px;height:800px;"></div>
</body>

<script>
    let geoCoordMap = {
        "新疆": [85.1926415, 41.12288857],
        "西藏": [88.43673257, 31.48823329],
        "内蒙古": [113.92912239, 44.08809897],
        "青海": [96.03436356, 35.65829543],
        "四川": [102.70150685, 30.62680611],
        "黑龙江": [127.77378118, 47.87188389],
        "甘肃": [103.64059604, 36.35879865],
        "云南": [101.49214753, 24.96036421],
        "广西": [108.79660281, 23.80251565],
        "湖南": [111.70495941, 27.61472276],
        "陕西": [108.85765186, 35.18813435],
        "广东": [113.38861941, 23.20407631],
        "吉林": [126.21170909, 43.66006324],
        "河北": [114.44479847, 38.1327899],
        "湖北": [112.26907404, 30.98295441],
        "贵州": [106.8837973, 26.81210038],
        "山东": [118.34204108, 36.37870467],
        "江西": [115.72166106, 27.60760747],
        "河南": [113.60887227, 33.87745764],
        "辽宁": [122.56568704, 41.16663449],
        "山西": [112.28655499, 37.56301482],
        "安徽": [117.22677485, 31.82463219],
        "福建": [118.13973516, 26.0273177],
        "浙江": [120.43890766, 29.25319433],
        "江苏": [119.51005096, 32.98616352],
        "重庆": [107.88132357, 30.0663678],
        "宁夏": [106.17615214, 37.26017465],
        "海南": [109.7831623, 19.21971582],
        "台湾": [120.97042727, 23.77653376],
        "北京": [116.4210652, 40.18082388],
        "天津": [117.3418005, 39.26615258],
        "上海": [121.50615631, 31.21973349],
        "香港": [114.21711047, 22.32275537],
        "澳门": [113.57287999, 22.15711775],
    };

    let convertData = function (data) {
        var res = [];
        for (var i = 0; i < data.length; i++) {
            var geoCoord = geoCoordMap[data[i].name];
            if (geoCoord) {
                res.push({
                    name: data[i].name,
                    value: geoCoord.concat(data[i].value)
                });
            }
        }
        return res;
    };
    console.log(convertData([{
            name: "北京",
            value: 9
        },
        {
            name: "天津",
            value: 12
        },
        {
            name: "河北",
            value: 12
        },
        {
            name: "山西",
            value: 12
        },
        {
            name: "内蒙古",
            value: 14
        },
        {
            name: "辽宁",
            value: 15
        },
        {
            name: "吉林",
            value: 16
        },
        {
            name: "黑龙江",
            value: 18
        },
        {
            name: "上海",
            value: 18
        },
        {
            name: "江苏",
            value: 19
        },
        {
            name: "浙江",
            value: 21
        }
    ]));

    let myChart = echarts.init(document.getElementById('echarts'), 'shine');
    let option = {
        backgroundColor: '#404a59',
        title: {
            text: '全国主要城市空气质量',
            subtext: 'data from PM25.in',
            sublink: 'http://www.pm25.in',
            x: 'center',
            textStyle: {
                color: '#fff'
            }
        },
        tooltip: {
            trigger: 'item',
            formatter: function (params) {
                console.log(params);
                return params.name + ' : ' + params.value[2];
            }
        },
        legend: {
            orient: 'vertical',
            y: 'bottom',
            x: 'right',
            data: ['pm2.5'],
            textStyle: {
                color: '#fff'
            }
        },
        visualMap: {
            min: 0,
            max: 200,
            calculable: true,
            inRange: {
                color: ['#50a3ba', '#eac736', '#d94e5d']
            },
            textStyle: {
                color: '#fff'
            }
        },

        series: [{
            type: 'map',
            map: 'china',
            label: {
                emphasis: {
                    show: false
                }
            },
            itemStyle: {
                normal: {
                    areaColor: '#323c48',
                    borderColor: '#111'
                },
                emphasis: {
                    areaColor: '#2a333d'
                }
            }
        }, {
            name: 'pm2.5',
            type: 'scatter',
            coordinateSystem: 'geo',
            data: convertData([{
                    name: "北京",
                    value: 9
                },
                {
                    name: "天津",
                    value: 12
                },
                {
                    name: "河北",
                    value: 12
                },
                {
                    name: "山西",
                    value: 12
                },
                {
                    name: "内蒙古",
                    value: 14
                },
                {
                    name: "辽宁",
                    value: 15
                },
                {
                    name: "吉林",
                    value: 16
                },
                {
                    name: "黑龙江",
                    value: 18
                },
                {
                    name: "上海",
                    value: 18
                },
                {
                    name: "江苏",
                    value: 19
                },
                {
                    name: "浙江",
                    value: 21
                }
            ]),
            symbolSize: 5,
            label: {
                normal: {
                    show: false
                },
                emphasis: {
                    show: false
                }
            },
            itemStyle: {
                emphasis: {
                    borderColor: '#fff',
                    borderWidth: 1
                }
            },
            formatter: function (params) {
                console.log(params)
                return params.seriesName;
            }
        }]
    }

    myChart.setOption(option)
</script>

</html>